import Taro from "@tarojs/taro";
import { Tabbar } from "@taroify/core";
import {
  WapHomeOutlined,
  AppsOutlined,
  InfoOutlined,
  ContactOutlined,
} from "@taroify/icons";
import "@taroify/icons/index.scss";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { setActive } from "@/store/reducers/tabbar";

export default function Index() {
  const businessId = useSelector(
    (state: RootState) => state.business.businessId
  );
  const isHomeShow = useSelector(
    (state: RootState) => state.business.isHomeShow
  );

  const list = [
    {
      pagePath: "/pages/home/index",
      icon: <WapHomeOutlined size={20} />,
      text: "HOME",
    },
    {
      pagePath: "/pages/classify/index",
      icon: <AppsOutlined size={20} />,
      text: businessId && isHomeShow ? "PRODUCTS" : "CLASSIFY",
    },
    {
      pagePath: "/pages/about/index",
      icon: <InfoOutlined size={20} />,
      text: "ABOUT",
    },
    {
      pagePath: "/pages/me/index",
      icon: <ContactOutlined size={20} />,
      text: "ME",
    },
  ];
  const selected = useSelector((state: RootState) => state.tabbar.active);
  const dispatch = useDispatch();

  function switchTab(index, url) {
    dispatch(setActive(index));
    Taro.switchTab({ url });
  }

  return (
    <Tabbar value={selected} fixed={true} safeArea="bottom">
      {list.map((item, index) => (
        <Tabbar.TabItem
          key={item.pagePath}
          onClick={() => switchTab(index, item.pagePath)}
          icon={item.icon}
          value={index}
          style={{ color: selected === index ? "#13af87" : "" }}
        >
          {item.text}
        </Tabbar.TabItem>
      ))}
    </Tabbar>
  );
}
